<template>
  <div class="formSearch">
    <form action="/">
      <van-search
        :background="'#f6f5f6'"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="searchResult" v-for="item in renderList" :key="item.city" @click="nameAdd(item.communityName,item.community)">
      {{item.communityName}}
    </div>
  </div>
</template>

<script>
import {communityHousers} from '@/api/Interface.js'

export default {
  data() {
    return {
      value: '',
      renderList:[]
    }
  },
  methods: {
    async onSearch(val) {
        const res = await communityHousers({name: val,id:JSON.parse(localStorage.getItem('labelCity')).value})
        this.renderList = [...this.renderList,...res.body]
    },
    onCancel() {
      this.$router.back()
    },
    nameAdd(data,value){
      this.$store.commit('search/updata', data)
      this.$store.commit('search/upvalue', value)
      this.$router.back()
    }
  },
  
}
</script>

<style scoped lang="less">
*{
  box-sizing:border-box !important;
}
.formSearch {
  width: 100%;
  height: 44px;
  background-color: #f6f5f6;
  line-height: 44px;
  .van-search--show-action{
    height: 44px !important;
  }
}
.van-field{
  height: 28px;
}
.searchResult{
  height: 50px;
  // background-color: aqua;
  margin:0 5px 0 5px;
  line-height: 50px;
  border-bottom: 1px solid #f1f1f1;
  font-size: 14px;
  text-indent: 5px;
  border-bottom: 1px solid #f1f1f1;
}
</style>
